<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>模板</title>
</head>

<body>
    <!-- 
        data与el的两种写法
            1.el有两种写法
                (1).new Vue时候配置el属性
                (2).先创建Vue实例,随后通过vm.$mount('#root')指定el的值
            2.data的两种写法
                (1).对象式
                (2).函数式
                如何选择:目前那种写法都可以,以后学习到组件时,data必须要使用函数式,否则会报错
            3.一个重要的原则:
                有Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        这里是{{ city.toUpperCase() }},中国{{ chinaCity }}, {{ Date.now() }}
    </div>

    <script>
        Vue.config.productionTip = false


        // el的两种写法
        // const v = new Vue ({
        //     // el: '#root',第一种
        //     data: {
        //         city: 'shenzhen',
        //         chinaCity: '深圳'
        //     }
        // })

        // console.log(v)
        // // v.$mount('mount') 第二种
        // // 定时器1S后
        // setTimeout(() => {
        //     v.$mount('#root') 
        // }, 1000);

        // data的两种写法
        new Vue({
            el: '#root',
            // data第一种写法:对象式
            // data:{
            //     city:'guangdong',
            //     chinaCity:'深圳'
            // }
            // data第二种写法:函数式
            // data: function () {
            //     return {
            //         city: 'guangdong',
            //         chinaCity: '深圳'
            //     }
            // }
            // 全局函数
            // data:()=> {
            //     console.log('@@@',this)
            //     return {
            //         city: 'guangdong',
            //         chinaCity: '深圳'
            //     }
            // }
            // 简写函数
            data(){
                return{
                    city:'guangdong',
                    chinaCity:'深圳'
                }
            }
        })

    </script>
</body>

</html>